<header class="sm:px-8 top-[var(--header-top,theme(spacing.6))] w-full pt-4"
  style="position:var(--header-inner-position)">
  <div class="mx-auto w-full max-w-7xl lg:px-8">
    <div class="relative px-4 sm:px-8 lg:px-12">
      <div class="mx-auto max-w-2xl lg:max-w-5xl">
        <div class="relative flex gap-4">
          <div class="flex flex-1">
            <div <%= selectedIndex < 0 ? 'hidden' : '' %>
              class="h-10 w-10 rounded-full bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10">
              <a aria-label="Home" class="pointer-events-auto" href="/"><img alt="" fetchpriority="high" width="512"
                  height="512" decoding="async" data-nimg="1"
                  class="rounded-full bg-zinc-100 object-cover dark:bg-zinc-800 h-9 w-9" sizes="2.25rem"
                  src="/images/avatar.jpg" style="color: transparent;"></a>
            </div>
          </div>
          <div class="flex flex-1 justify-end md:justify-center">
            <div class="pointer-events-auto md:hidden">
              <button
                class="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20"
                type="button" aria-expanded="false" id="headlessui-popover-button-:R1eqbacq:"
                popovertarget="menuPopoverPopover">
                菜单
                <svg viewBox="0 0 8 6" aria-hidden="true"
                  class="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400">
                  <path d="M1.75 1.75 4 4.25l2.25-2.5" fill="none" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                </svg>
              </button>
              <div popover id="menuPopoverPopover"
                class="fixed z-50 w-full h-full bg-white origin-top rounded-3xl p-8 ring-1 ring-zinc-900/5 duration-150 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-900 dark:ring-zinc-800"
                id="headlessui-popover-panel-:R3eqbacq:" tabindex="-1" data-headlessui-state="open">
                <div class="flex flex-row-reverse items-center justify-between">
                  <button aria-label="Close menu" class="-m-1 p-1" type="button" data-headlessui-state="open active"
                    popovertargetaction="hide" popovertarget="menuPopoverPopover">
                    <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 text-zinc-500 dark:text-zinc-400">
                      <path d="m17.25 6.75-10.5 10.5M6.75 6.75l10.5 10.5" fill="none" stroke="currentColor"
                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </button>
                  <h2 class="text-sm font-medium text-zinc-600 dark:text-zinc-400">导航</h2>
                </div>
                <nav class="mt-6">
                  <ul
                    class="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
                    <li><a class="block py-2 <%= selectedIndex === 0 ? 'text-teal-500' : '' %>"
                        data-headlessui-state="open active" href="/about">关于我</a></li>
                    <li><a class="block py-2 <%= selectedIndex === 1 ? 'text-teal-500' : '' %>"
                        data-headlessui-state="open active" href="/projects">项目集</a></li>
                    <li><a class="block py-2 <%= selectedIndex === 2 ? 'text-teal-500' : '' %>"
                        data-headlessui-state="open active" href="https://blog.csdn.net/zweizhao" target="_blank">文章集</a></li>
                    <li><a class="block py-2 <%= selectedIndex === 3 ? 'text-teal-500' : '' %>"
                        data-headlessui-state="open active" href="/uses">工具集</a></li>
                  </ul>
                </nav>
              </div>
            </div>
            <div hidden=""
              style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none">
            </div>
            <nav class="pointer-events-auto hidden md:block">
              <ul
                class="flex rounded-full bg-white/90 px-3 text-sm text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 font-bold">
                <li>
                  <a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400 <%= selectedIndex === 0 ? 'text-teal-500' : '' %>"
                    href="/about">关于我</a>
                </li>
                <li>
                  <a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400 <%= selectedIndex === 1 ? 'text-teal-500' : '' %>"
                    href="/projects">项目集</a>
                </li>
                <li>
                  <a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400 <%= selectedIndex === 2 ? 'text-teal-500' : '' %>"
                    href="https://blog.csdn.net/zweizhao" target="_blank">文章集</a>
                </li>
                <li>
                  <a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400 <%= selectedIndex === 3 ? 'text-teal-500' : '' %>"
                    href="/uses">工具集</a>
                </li>
              </ul>
            </nav>
          </div>
          <div class="flex justify-end md:flex-1">
            <div class="pointer-events-auto">
              <button type="button"
                aria-label="Toggle theme"
                class="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
                onclick="toggleTheme()">
                <svg viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
                  class="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden">
                  <path d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z"></path>
                  <path d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061" fill="none"></path>
                </svg>
                <svg viewBox="0 0 24 24" aria-hidden="true"
                  class="hidden h-6 w-6 fill-zinc-700 stroke-zinc-500 transition dark:block">
                  <path d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<script>
  // 检查系统主题
  function getSystemTheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  // 应用主题
  function applyTheme(theme) {
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
    localStorage.setItem('theme', theme);
  }

  // 主题切换函数 - 手动切换优先
  function toggleTheme() {
    const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    applyTheme(newTheme);
    // 设置手动切换标志
    localStorage.setItem('manualTheme', 'true');
  }

  // 初始化主题
  function initTheme() {
    const savedTheme = localStorage.getItem('theme');
    const isManuallySet = localStorage.getItem('manualTheme') === 'true';

    // 如果有手动设置的主题，优先使用
    if (isManuallySet && savedTheme) {
      applyTheme(savedTheme);
    } else {
      // 否则使用系统主题
      const systemTheme = getSystemTheme();
      applyTheme(systemTheme);
    }

    // 监听系统主题变化
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      // 只有在没有手动设置主题时，才跟随系统主题
      if (!localStorage.getItem('manualTheme')) {
        const newTheme = e.matches ? 'dark' : 'light';
        applyTheme(newTheme);
      }
    });
  }

  // 页面加载时初始化主题
  document.addEventListener('DOMContentLoaded', initTheme);
</script>